<template>
  <div class="household-card" ref="household">
    <el-card shadow="never">
      <div slot="header" class="title">
        <span>企业户数变动情况（按产权层级分析）</span>
      </div>
      <echarts
          id="household-card"
          v-if="echartHeight"
          :options="options"
          :width="echartWidth"
          :height="echartHeight"
      />
    </el-card>
  </div>
</template>

<script>
import Echarts from '../echarts/index.vue'

export default {
  name: 'HouseholdCard',
  components: { Echarts },
  data () {
    return {
      echartWidth: null,
      echartHeight: null,
      options: {
        legend: {
          right: '15%',
          textStyle: {
            color: 'rgba(0,0,0,0.85)',
            fontSize: 12,
            fontFamily: 'PingFangSC-Regular'
          },
          data: [
            {
              name: '产权层级',
              itemStyle: {
                color: '#FFB143'
              }
            }
          ]
        },
        color: '#FFC335',
        xAxis: [{
          type: 'category',
          data: ['一级', '二级', '三级', '四级', '五级'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [
          {
            type: 'value',
            name: '户数（户）',
            nameTextStyle: {
              padding: [20, 0],
              color: 'rgba(0,0,0,0.65)',
              fontFamily: 'PingFangSC-Regular',
              fontSize: 12,
              align: 'right',
              lineHeight: 20
            }
          }
        ],
        series: [
          {
            name: '产权层级',
            type: 'bar',
            data: [1900, 2000, 3460, 6000, 700, 1010, 1300],
            barWidth: 24,
            emphasis: {
              itemStyle: {
                color: '#FF9018'
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.echartWidth = this.$refs.household.clientWidth - 20 * 2
      const headerHeight = document.getElementsByClassName('el-card__header')[0].offsetHeight
      this.echartHeight = this.$refs.household.clientHeight - headerHeight - 20 * 2
    })
  }
}
</script>

<style lang="scss" scoped>
.household-card {
  .el-card {
    /deep/ .el-card__header {
      padding: 15px 20px !important;
    }

    // /deep/ .el-card__body {
    //     padding: 20px 40px !important;
    // }
  }

  .title {
    line-height: 24px;

    span {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
</style>